<template>
  <div>
    <van-nav-bar
      title="市容顽症事件"
      left-text=""
      :left-arrow="false"
      :fixed="true"
      @click-left="onClickLeft"
    />
     <div class="title">人员处置记录单</div>
     <div class="desc">
        <i></i>
        <span>事件到人待结案</span>
      </div>
    <div class="poweruser">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="事件详情" name="1">
          <van-cell-group>
            <van-field label="事件类型" value="输入框只读" v-model="eventype" readonly />
            <van-field label="发生时间" value="输入框只读" v-model="creatime" readonly />
          </van-cell-group>
        </van-collapse-item>
        <van-collapse-item title="人员信息" name="2">
           <van-cell-group>
            <!-- <van-field label="当事人姓名" value="输入框只读" readonly /> -->
            <van-field v-model="dutyUser.name" label="当事人姓名" placeholder="请输入名字" />
            <van-cell class="sex-name" title="性别">
              <van-radio-group v-model="dutyUser.gender"  >
                  <van-row>
                      <van-col span="12">
                          <van-radio name="0">男</van-radio>
                      </van-col>
                      <van-col span="12">
                          <van-radio name="1">女</van-radio>
                      </van-col>
                  </van-row>
              </van-radio-group>
            </van-cell>
            <van-field v-model="dutyUser.age" label="年龄" type="digit" placeholder="请输入年龄" />
            <van-field v-model="dutyUser.tel" label="联系方式" type="tel" placeholder="请输入联系方式" />
            <van-field v-model="dutyUser.company" label="责任单位" type="text" placeholder="请输入单位名称" />
            <van-field v-model="dutyUser.address" label="联系地址" type="text" placeholder="请输入联系地址" />
            <van-cell title="当事人照片" icon="photo-o" />
              <div
                class="vimg"
                v-for="(item, index) in dutyUser.imageUrls"
                :key="index"
                @click="vimghandle(item)"
              >
                <van-image width="100" height="100" :src="item.url" />
              </div>
          </van-cell-group>
        </van-collapse-item>
        <van-collapse-item title="处置信息" name="3">
          <van-field v-model="info" label="检察人员" placeholder="请输入检察人员信息" />
          <van-field
            v-model="dutyUser.handleInfo"
            rows="2"
            autosize
            label="检查情况描述"
            type="textarea"
            maxlength="100"
            placeholder="请输入详细情况"
            show-word-limit
          />
          <van-radio-group  class="rectification-status" v-model="dutyUser.modifyType" direction="vertical">
            <van-radio name="1">立即整改</van-radio>
            <van-radio name="2">限期整改</van-radio>
          </van-radio-group>
          <van-cell v-show="limitime" class="rectification-time" title="限期截止日期">
            <div class="limitime-box" :value="date"  @click="show = true" >
              <span class="limitime-date">{{dutyUser.modifyEndTime}}</span>
              <span class="limitime-icon"></span>
            </div>
          </van-cell>
          <van-field
            v-model="dutyUser.modifyContent"
            rows="2"
            autosize
            label="限期整改内容"
            type="textarea"
            maxlength="100"
            placeholder="请输入详细情况"
            show-word-limit
          />
      </van-collapse-item>
      </van-collapse>
      <!-- <van-calendar v-model="show" @confirm="onConfirm" /> -->
      <div class="goindex">
        <van-button
          class="goindex-back"
          round
          color="linear-gradient(270deg, #FF8F43 0%, #F67665 100%)"
          type="primary"
          block
          @click="goindexhandleBack"
          >返回首页</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "chengguanDetail",
  data() {
    return {
      activeNames: ["1","2","3"],
      // radio: -1,
      // inputName:'',
      // sex:'M',
      // inputAge:'',
      // inputPhone:'',
      // inputUnit:'',
      // inputAddress:'',
      // info:'',
      // message:'',
      // uploader: [],
      // radio:'1',
      limitime:true,
      updateTime:'',
      date: '',
      show: false,
      dateShow:false,
      // message1:''
      dutyUser:{},
      eventype:'',
      creatime:''
    };
  },
  mounted() {
    if(this.$route.params){
      this.dutyUser = this.$route.params.lists.dutyUser;
      this.eventype = this.$route.params.lists.eventype;
      this.creatime = this.$route.params.lists.creatime;
    }
    // this.addDate()
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/" });
    },
    itemhandle() {
      this.popupshow = true;
    },
    //获取当前年月日
    // addDate(){
    //   const nowDate = new Date();
    //   const date = {
    //       year: nowDate.getFullYear(),
    //       month: nowDate.getMonth() + 1,
    //       date: nowDate.getDate(),
    //   }
    //   const newmonth = date.month>10?date.month:'0'+date.month
    //   const day = date.date>10?date.date:'0'+date.date
    //   this.updateTime = date.year + '-' + newmonth + '-' + day
    // },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.updateTime = this.formatDate(date);
    },
    goindexhandleBack() {
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: #daf4f1;
  color: #04bfac;
  font-weight: bold;
  text-align: center;
  margin-top: 11%;
}
.desc {
  width: 100%;
  height: 35px;
  color: #FF8F43;
  line-height: 35px;
  font-weight: bold;
  font-size: 16px;
}
.desc i {
  width: 10px;
  height: 10px;
  background: #FF8F43;
  border-radius: 50%;
  float: left;
  margin: 11px 10px 0px 20px;
}
.grid-item {
  width: 100%;
  padding: 15px 0px;
  border-bottom: 1px #f5f5f5 solid;
}
.grid-item b {
  padding-right: 40px;
  padding-left: 10px;
}
.grid-item span {
  color: #6e6e6e;
  font-weight: bold;
}
.grid-item:last-child {
  border: none;
}
.func {
  width: 75%;
  margin: auto;
  text-align: center;
}

.func .func-t {
  font-size: 15px;
  font-weight: bold;
}
.func .qxgl {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #04bfac;
}
.func .xxxg {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #04bfac;
}
.func .del {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #f57665;
}
.func .cancel {
  border-top: 1px #f5f5f5 solid;
  padding: 10px 0px;
  box-sizing: border-box;
  margin: 0px;
  color: #999999;
}
.changeform {
  margin-top: 10px;
}
.dform {
  width: 90%;
  margin: 10px auto;
}
.cformt {
  text-align: center;
  font-weight: bold;
  font-size: 15px;
}
.sex-name .van-cell__title{
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  width: 90px;
}
.rectification-status{
  width: 100%;
  height: 40px;
  display: flex;
  position: relative;
}
.rectification-status:after{
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #ebedf0;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
}
.rectification-status .van-radio{
  padding-right: 10px;
  margin-left: 20px;
}
.rectification-time .van-cell__title{
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  width: 90px;
}
.limitime-box{
  width: 100%;
  height: 100%;
  display: flex;
  padding-left: 10%;
}
.limitime-icon{
  width: 15px;
  height: 15px;
  margin-top: 4px;
  margin-left: 4px;
  background-image: url('../../../../assets/img/workingEvents/icon-date.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.goindex {
  width: 90%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}
.goindex-back{
  width:100%;
}
</style>
